// import { Canvas } from '@react-three/fiber';
import { FC, useEffect, useRef } from 'react';
import { Sampler } from '@react-three/drei';
import { Color, Matrix4, MeshBasicMaterial, Vector3, InstancedMesh } from 'three';
import { useFrame } from '@react-three/fiber';

// const m4 = new Matrix4()

export const InstanceSamplerMesh: FC = () => {
  const instanceNum = 10000;
  const random = (i: number, scale = 1) => (Math.random() - 0.5) * Math.log(i) * scale;
  const ref = useRef<InstancedMesh>(null!);

  const transformPoint = (payload: any, i: number) => {
    if (i < 10) console.log('payload', payload, i);
    payload.dummy.position.set(random(i, 7), random(i, 7), random(i, 7));
    payload.dummy.scale.setScalar(Math.random());
  };

  // useFrame((state, delta) => {
  //   console.log('delta', delta, ref.current.setMatrixAt(i, ))
  //   for (let i = 0; i < instanceNum; i++) {

  //   }
  // });

  
  useEffect(() => {
    console.log('ref', ref)


  }, [])
  return <>
    <Sampler
      weight={'normal'} // the name of the attribute to be used as sampling weight
      transform={transformPoint} // a function that transforms each instance given a sample. See the examples for more.
      count={instanceNum} // Number of samples
    >
      <instancedMesh args={[undefined, undefined, 1_000]} ref={ref}>
        <sphereGeometry args={[0.2]} />
        <meshPhongMaterial color={0xffffff} />
      </instancedMesh>
    </Sampler>
  </>
}
